<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.css">
<link rel="stylesheet" href="temas/clasico.css">

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>	
<script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
	var db = null;
	
	function iniciar() {
		document.addEventListener("deviceready", dispositivoListo, false);
	}

	function dispositivoListo() {
		db = window.openDatabase("Muni", "1.0", "DB Muni", 200000);
	}

	function readData() {
 		db.transaction(queryDB, errorCB);
	}

	function queryDB(tx) {
		tx.executeSql("SELECT id, email, pass FROM tbcustomer", [], procesarResultado, errorCB);
	}
	
	function procesarResultado(tx, result) {
		
		var total = result.rows.length;
		
		console.log("### Municipality ###: procesarResultado:  total: " + total);	
		
        for (var i=0; i<total; i++){              		
        	console.log("id: " + result.rows.item(i).id);
            $('#txtEmail').html(result.rows.item(i).email);	
            $('#txtPassword').html(result.rows.item(i).pass);
        }        
	}
	
	function errorCB(err) {
		alert("En breve lo atenderemos: " + err.code);
	}

</script>
</head>

<body onload="iniciar()">

	<div data-role="page" data-theme="a">

		<div data-role="header" data-position="fixed">
			<h1>PI PhoneGap</h1>
		</div>

		<div data-role="content">
			<p>Leer de SQLite</p>

			<form>
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">Leer registro</li>
					<li><label for="email">Email:</label>
						<label id="txtEmail"></label>
					</li>
					<li><label for="password">Password:</label>
						<label id="txtPassword"></label>
					</li>
					<li>					
						<input type="button" onclick="readData()" value="Read data" data-icon="check"/>
					</li>						
				</ul>
			</form>

		</div>

		<div data-role="footer" data-position="fixed">
			<h1>RCondezo &copy; 2013</h1>
		</div>
	</div>

</body>

</html>